<template>
  <div class="businessMask">
    <div
      id="box1"
      ref="elememt"
      :class="windowShow ? 'businessDialog large' : 'businessDialog-hide'"
    >
      <div class="dialog-header" v-winmove>
        <span>{{ titleName }}</span>
        <span class="icon iconfont iconbiaoqianlan-guanbi" @click="hide"></span>
      </div>
      <div class="dialog-body" style="height: calc(100% - 48px)">
        <div class="buttons-wrapper">
          <div class="businessButtonInline" style="margin-right: 16px">
            <span class="businessButtonDownload" @click="download"></span>
            <span>下载</span>
          </div>
          <div class="businessButtonInline" style="margin-right: 1px">
            <span
              :class="[
                !isBrowse && isEdit
                  ? 'businessButtonAdd'
                  : 'businessButtonAdd businessButtonDisabled',
              ]"
              @click="add"
              style="border-radius: 4px 0px 0px 4px !important"
            ></span>
            <span>新增</span>
          </div>
          <div class="businessButtonInline" style="margin-right: 16px">
            <span
              :class="[
                !isBrowse
                  ? 'businessButtonEdit'
                  : 'businessButtonEdit businessButtonDisabled',
              ]"
              @click="edit"
              style="border-radius: 0px 4px 4px 0px !important"
            ></span>
            <span>编辑</span>
          </div>
          <div class="businessButtonInline">
            <span
              :class="[
                !isBrowse
                  ? 'businessButtonDelete'
                  : 'businessButtonDelete businessButtonDisabled',
              ]"
              @click="del"
            ></span>
            <span>删除</span>
          </div>
        </div>
        <div class="manage-list">
          <el-table
            class="businessTable"
            :highlight-current-row="true"
            stripe
            :data="historyData"
            ref="multipleTable"
            height="tableHeight"
            max-height="calc(100%)"
            row-class-name="row"
            cell-class-name="column"
            @selection-change="handleSelectionChange"
            @select="select"
            @select-all="selectAll"
            @row-click="rowClick"
            @row-dblclick="dblclick"
            style="width: 100%"
            :fit="true"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              min-width="80"
              v-for="(item, index) in tableLabel"
              :key="index"
              :prop="item.prop"
              :width="item.width"
              :label="item.label"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <template v-if="item.prop == 'fileName'">
                  <img
                    :src="setClass(scope.row['fileExt'])"
                    style="margin-right: 3px; vertical-align: middle"
                  />
                  {{ scope.row[scope.column.property] }}
                </template>
                <template v-else-if="item.prop !== 'fileName'">{{
                  scope.row[scope.column.property]
                }}</template>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="businessPagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="queryList.pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <com-doc
      v-if="editFlag"
      @hide="hideChild"
      :fieldName="fieldName"
      :fileType="fileType"
      :titleName="titleName1"
      :tableName="tableName"
      :mid="tMid"
      :id="fid"
      :gcId="gcId"
      :xmId="xmId"
      :deptId="deptId"
      :fjParam="newfjParam"
      @query="search"
      :isBrowse="isRead"
    ></com-doc>
    <!-- titleName表示文档所属模块名称，tableName表示业务表表名用于保存在附件表中(大写),isBrowse表示浏览状态，fileType表示附件所属类别 
    fieldName表示附件存放在业务表中的对应字段名，fid表示为本列表数据id，mid表示父组件主id用于保存在文档数据表mid字段中-->
  </div>
</template>
<script>
import winmove from "@/directives/winmove";
import ComDoc from "./detail.vue";
import { fileList, fileDel, fileDownload } from "@/system/api/attachment";
export default {
  name: "ComDocManage",
  props: {
    titleName: {
      default: "附件管理",
    },
    tableName: {
      default: "",
    },
    id: {
      default: "",
    },
    mid: {
      default: "",
    },
    fieldName: {
      default: "",
    },
    isBrowse: {
      default: false,
    },
    fileType: {
      default: "",
    },
    fjParam: {
      default: null,
    },
    gcId: {
      default: "",
    },
    xmId: {
      default: "",
    },
    deptId: {
      default: "",
    },
  },
  data() {
    return {
      newfjParam: {},
      isEdit: true,
      max: 9999,
      tMid: null,
      isRead: false,
      pageSizes: [5, 10, 15, 20],
      tableHeight: "100%",
      fid: "",
      isAble: false,
      total: 0,
      currentPage: 1,
      queryList: {
        keyword: "",
        pageSize: 10,
        page: 0,
        mId: "",
        tableName: "",
        fieldName: "",
        type: 0,
        xmId: "",
        gcId: "",
        deptId: "",
        fjParam: null,
      },
      historyData: [],
      multipleSelection: [],
      editFlag: false,
      action: "",
      windowShow: true,
      name: "",
      tableLabel: [
        {
          label: "附件名",
          width: 220,
          prop: "fileName",
        },
        {
          label: "附件大小(KB)",
          width: "",
          prop: "fileSize",
        },
        {
          label: "字段名",
          width: "",
          prop: "fieldName",
        },
        {
          label: "描述",
          width: "",
          prop: "note",
        },
        {
          label: "上传时间",
          width: "",
          prop: "upTime",
        },
      ],
      historyDate: [],
      // 表格数据
      tableData: [],
      titleName1: "",
    };
  },
  directives: {
    winmove,
  },
  components: {
    ComDoc,
  },
  mounted: function () {
    this.getTableHeight(0);
    this.queryData(0);
  },
  methods: {
    //获取最大上传数
    getMaxNum() {
      this.newfjParam = JSON.parse(this.fjParam);
      if (this.newfjParam != undefined) {
        if (this.newfjParam.max != undefined) {
          this.max = JSON.parse(this.fjParam).max;
          if (this.total >= this.max) {
            this.isEdit = false;
          } else {
            this.isEdit = true;
          }
        }
      }
    },
    // table高度
    getTableHeight() {
      let that = this;
      let contentHeight = this.$refs.elememt.offsetHeight;
      that.tableHeight = contentHeight - 160 - 40;
      let tableBodyHeight = that.tableHeight - 40;
      that.queryList.pageSize = parseInt(tableBodyHeight / 40);
      this.end = parseInt(tableBodyHeight / 40);
      that.pageSizes.push(that.queryList.pageSize);
    },
    setClass(item) {
      if (item === "jpg" || item === "png" || item === "gif") {
        return require("../../../assets/image/icon_file_pic.png");
      } else if (item === "xlsx" || item === "xls") {
        return require("../../../assets/image/icon_file_execl.png");
      } else if (item === "txt" || item == "doc" || item == "docx") {
        return require("../../../assets/image/icon_file_word.png");
      } else if (item === "mp4" || item === "avi") {
        return require("../../../assets/image/icon_file_video.png");
      } else if (item === "rar" || item === "zip") {
        return require("../../../assets/image/icon_file_zip.png");
      } else if (item === "pdf") {
        return require("../../../assets/image/icon_file_ppt.png");
      } else if (item === "ppt") {
        return require("../../../assets/image/icon_file_execl.png");
      } else if (item === "dwg") {
        return require("../../../assets/image/icon_file_cad.png");
      } else {
        return require("../../../assets/image/icon_file_other.png");
      }
    },
    download: function () {
      let i;
      let selections = this.multipleSelection;
      i = selections.length;
      if (i !== 1) {
        this.message("请先选中需要下载的数据！", 3);
        return false;
      }
      var id = selections[0].id;
      fileDownload({ id: id }).then((res) => {
        var baseUrl = this.api;
        var length = baseUrl.length - 1;
        var index = baseUrl.indexOf("/");
        if (index == length) {
          window.location.href = baseUrl.substring(0, length - 1) + res.info;
        } else {
          window.location.href = baseUrl + res.info;
        }
      });
    },
    search: function () {
      this.queryData(0);
    },
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      this.queryData(0);
    },
    handleCurrentChange(val) {
      this.queryData(val);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let count = 1;
      for (let j = 0; j < this.multipleSelection.length; j++) {
        if (this.multipleSelection[j].state == 0) {
          count = count + 1;
        }
      }
      this.isAble = count;
    },
    // eslint-disable-next-line no-unused-vars
    rowClick(row, col, event) {
      row.flag = !row.flag;
      this.$refs.multipleTable.toggleRowSelection(row, row.flag);
    },
    // eslint-disable-next-line no-unused-vars
    dblclick(row, col, event) {
      this.fid = row.id;
      this.editFlag = true;
      this.titleName1 = "浏览附件";
      this.isRead = true;
    },
    queryData: function (page) {
      if (page) {
        this.queryList.page = page - 1;
        this.currentPage = page;
      } else {
        this.queryList.page = 0;
        this.currentPage = 1;
      }
      this.queryList.mid = this.mid;
      this.queryList.tableName = this.tableName;
      this.queryList.fieldName = this.fieldName;
      this.queryList.gcId = this.gcId;
      this.queryList.xmId = this.xmId;
      this.queryList.deptId = this.deptId;
      this.queryList.fjParam = this.fjParam;
      fileList(this.queryList).then((res) => {
        if (res.success) {
          this.total = res.totalCount;
          this.getMaxNum();
          this.tableData = res.info;
          let arr = [];
          Object.keys(res.info).forEach(function (i) {
            arr.push(res.info[i].fileName);
          });
          this.name = arr.join(",");
          if (res.totalCount < this.queryList.pageSize) {
            this.historyData = this.tableData;
          } else {
            this.historyData = this.tableData.slice(0, this.queryList.pageSize);
          }
        } else {
          this.historyData = [];
          this.currentPage = 1;
          this.total = 0;
        }
      });
    },
    hide: function () {
      this.windowShow = false;
      setTimeout(() => {
        this.$emit("hide");
        this.$emit("updateFileName", this.name);
      }, 400);
    },
    hideChild: function () {
      this.editFlag = false;
      this.search;
    },
    add: function () {
      if (this.isBrowse == true) {
        return false;
      }
      if (this.isEdit == false) {
        return false;
      }
      this.tMid = this.mid;
      this.isRead = false;
      this.fid = "";
      this.editFlag = true;
      this.titleName1 = "新增附件";
    },
    select(e) {
      this.multipleSelection = e;
    },

    selectAll(e) {
      this.multipleSelection = e;
    },
    edit: function () {
      if (this.isBrowse == true) {
        return false;
      }
      let i;
      let selections = this.multipleSelection;
      i = selections.length;
      if (i !== 1) {
        this.message("请先选中需要编辑的数据！", 3);
        return false;
      }
      this.fid = selections[0].id;
      this.tMid = selections[0].mid;
      this.isRead = false;
      this.editFlag = true;
      this.titleName1 = "编辑附件";
    },
    del: function () {
      if (this.isBrowse == true) {
        return false;
      }
      var i;
      var selections = this.multipleSelection;
      i = selections.length;
      if (i !== 1) {
        this.message("请先选中需要删除的一条数据！", 3);
        return false;
      }
      this.messageBox("此操作将永久删除该文件, 是否继续?").then((res) => {
        if (res.action) {
          var id = selections[0].id;
          fileDel({ id: id, type: 0 }).then((res) => {
            if (res.code == 200) {
              this.queryData(0);
              this.message(res.msg, 1);
            } else {
              this.message(res.msg, 3);
            }
          });
        } else {
          this.queryData(0);
          this.message("取消删除！", 3);
        }
      });
    },
  },
};
</script>
<style scoped>
.manage-list {
  height: calc(100% - 72px);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
}
</style>
<style>
</style>
